<template>
  <div
    class="main-div"
    id="antenna"
    v-loading="antennaLoading"
  >
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          <!--配置-->
          {{ $t('message.p2p.breadcrumb.crumb1') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <!--点对点通信-->
          {{ $t('message.p2p.breadcrumb.crumb2') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card style="height: calc(100% - 60px)">
      <div
        class="card-header-div"
        style="float: none"
      >
        天线配置
        <el-button
          v-if="$store.state.is_staff"
          @click="handleAntennaCreate"
          type="text"
          size="mini"
          style="padding: 0 0 0 5px"
        >
          <i
            class="el-icon-plus"
            style="font-weight: bold"
          />
        </el-button>
      </div>
      <el-table
        :data="antennaTable"
        style="margin-top: 10px"
        class="table-gutter-background"
        header-cell-class-name="my-table-header-cell"
        cell-class-name="my-table-cell"
        height="calc(100% - 3em)"
      >
        <el-table-column
          prop="name"
          min-width="120px"
          :label="$t('message.center.antenna.tableheader.col1')"
        />
        <el-table-column
          prop="caliber_show"
          min-width="145px"
          :label="$t('message.center.antenna.tableheader.col2')"
        />
        <el-table-column
          prop="satellite_name"
          min-width="150px"
          :label="$t('message.center.antenna.tableheader.col3')"
        />
        <el-table-column
          prop="beam_name"
          min-width="140px"
          :label="$t('message.center.antenna.tableheader.col4')"
        />
        <el-table-column
          prop="gt"
          min-width="100px"
          :label="$t('message.center.antenna.tableheader.col5')"
        />
        <el-table-column
          prop="gain"
          :label="$t('message.center.antenna.tableheader.col6')"
        />
        <el-table-column
          prop="buc_gain"
          min-width="145px"
          :label="$t('message.center.antenna.tableheader.col7')"
        />
        <el-table-column
          prop="buc_power"
          min-width="250px"
          :label="$t('message.center.antenna.tableheader.col8')"
        />
        <el-table-column
          v-if="$store.state.is_staff"
          min-width="100px"
          :label="$t('message.common.label.operate')"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleAntennaModify(scope.$index, scope.row)"
              style="padding: 0"
              type="text"
            >
              <img src="@/assets/common/edit.png">
            </el-button>
            <el-button
              @click="handleAntennaDelete(scope.$index, scope.row)"
              style="padding: 0 0 0 5px"
              type="text"
            >
              <img src="@/assets/common/delete.png">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div>
      <el-dialog
        :title="$t('message.center.antenna.dialog.title', {operate: 'create'})"
        width="450px"
        :visible.sync="addAntennaVisible"
        @closed="handleAddAntennaDialogClosed"
      >
        <el-form
          class="demo-ruleform"
          ref="addAntennaForm"
          :model="addAntennaForm"
          :rules="antennaRules"
          label-width="200px"
        >
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label1')"
            prop="satellite"
          >
            <el-select
              @change="handleAddSatelliteSelectChange"
              v-model="addAntennaForm.satellite"
            >
              <el-option
                v-for="item in addAntennaForm.satelliteOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label2')"
            prop="beam"
          >
            <el-select v-model="addAntennaForm.beam">
              <el-option
                v-for="item in addAntennaForm.beamOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label3')"
            prop="name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="addAntennaForm.name"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label4')"
            prop="caliber"
          >
            <el-select v-model="addAntennaForm.caliber">
              <el-option
                label="0.5M"
                :value="0.5"
              />
              <el-option
                label="0.6M"
                :value="0.6"
              />
              <el-option
                label="0.9M"
                :value="0.9"
              />
              <el-option
                label="1.2M"
                :value="1.2"
              />
              <el-option
                label="1.8M"
                :value="1.8"
              />
              <el-option
                label="2.4M"
                :value="2.4"
              />
              <el-option
                label="3.7M"
                :value="3.7"
              />
              <el-option
                label="4.5M"
                :value="4.5"
              />
              <el-option
                label="7.3M"
                :value="7.3"
              />
              <el-option
                label="9.0M"
                :value="9.0"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label5')"
            prop="gt"
          >
            <el-input
              @blur="addAntennaForm.gt = $service.valueControl.antennaGainLimit(addAntennaForm.gt)"
              v-model="addAntennaForm.gt"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label6')"
            prop="gain"
          >
            <el-input
              @blur="addAntennaForm.gain = $service.valueControl.antennaGainLimit(addAntennaForm.gain)"
              v-model="addAntennaForm.gain"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label7')"
            prop="buc_gain"
          >
            <el-input
              @blur="addAntennaForm.buc_gain = $service.valueControl.antennaGainLimit(addAntennaForm.buc_gain)"
              v-model="addAntennaForm.buc_gain"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label8')"
            prop="buc_power"
          >
            <el-input
              @blur="addAntennaForm.buc_power = $service.valueControl.antennaGainLimit(addAntennaForm.buc_power)"
              v-model="addAntennaForm.buc_power"
            />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="submitButtonLoading"
              @click="submitForm('addAntennaForm')"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog
        :title="$t('message.center.antenna.dialog.title', {operate: 'modify'})"
        width="450px"
        :visible.sync="modifyAntennaVisible"
      >
        <el-form
          class="demo-ruleform"
          ref="modifyAntennaForm"
          :model="modifyAntennaForm"
          :rules="antennaRules"
          label-width="200px"
        >
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label1')"
            prop="satellite"
          >
            <el-select
              @change="handleModifySatelliteSelectChange"
              v-model="modifyAntennaForm.satellite"
            >
              <el-option
                v-for="item in modifyAntennaForm.satelliteOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label2')"
            prop="beam"
          >
            <el-select v-model="modifyAntennaForm.beam">
              <el-option
                v-for="item in modifyAntennaForm.beamOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label3')"
            prop="name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="modifyAntennaForm.name"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label4')"
            prop="caliber"
          >
            <el-select v-model="modifyAntennaForm.caliber">
              <el-option
                label="0.5M"
                :value="0.5"
              />
              <el-option
                label="0.6M"
                :value="0.6"
              />
              <el-option
                label="0.9M"
                :value="0.9"
              />
              <el-option
                label="1.2M"
                :value="1.2"
              />
              <el-option
                label="1.8M"
                :value="1.8"
              />
              <el-option
                label="2.4M"
                :value="2.4"
              />
              <el-option
                label="3.7M"
                :value="3.7"
              />
              <el-option
                label="4.5M"
                :value="4.5"
              />
              <el-option
                label="7.3M"
                :value="7.3"
              />
              <el-option
                label="9.0M"
                :value="9.0"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label5')"
            prop="gt"
          >
            <el-input
              @blur="modifyAntennaForm.gt = $service.valueControl.antennaGainLimit(modifyAntennaForm.gt)"
              v-model="modifyAntennaForm.gt"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label6')"
            prop="gain"
          >
            <el-input
              @blur="modifyAntennaForm.gain = $service.valueControl.antennaGainLimit(modifyAntennaForm.gain)"
              v-model="modifyAntennaForm.gain"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label7')"
            prop="buc_gain"
          >
            <el-input
              @blur="modifyAntennaForm.buc_gain = $service.valueControl.antennaGainLimit(modifyAntennaForm.buc_gain)"
              v-model="modifyAntennaForm.buc_gain"
            />
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.dialog.form.label8')"
            prop="buc_power"
          >
            <el-input
              @blur="modifyAntennaForm.buc_power = $service.valueControl.antennaGainLimit(modifyAntennaForm.buc_power)"
              v-model="modifyAntennaForm.buc_power"
            />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="submitButtonLoading"
              @click="submitForm('modifyAntennaForm')"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Antenna',
  computed: {
    antennaTable () {
      return this.$store.state.antenna.antennaList.map(item => {
        return {
          ...item,
          caliber_show: this.$service.convertNumber(item.caliber, 1)
        }
      })
    }
  },
  data () {
    return {
      antennaLoading: false,
      submitButtonLoading: false,

      antennaRules: {
        satellite: [
          // 请选择卫星
          { required: true, message: this.$t('message.validate.devices.antenna.satellite'), trigger: 'change' }
        ],
        beam: [
          // 请选择波束
          { required: true, message: this.$t('message.validate.devices.antenna.beam'), trigger: 'change' }
        ],
        name: [
          // 请输入天线名称
          { required: true, message: this.$t('message.validate.devices.antenna.name'), trigger: 'blur' }
        ],
        caliber: [
          // 请选择天线口径
          { required: true, message: this.$t('message.validate.devices.antenna.caliber'), trigger: 'change' }
        ],
        gt: [
          // 请输入天线GT值
          { required: true, message: this.$t('message.validate.devices.antenna.gt'), trigger: 'blur' }
        ],
        gain: [
          // 请输入天线增益
          { required: true, message: this.$t('message.validate.devices.antenna.gain'), trigger: 'blur' }
        ],
        buc_gain: [
          // 请输入buc线性增益
          { required: true, message: this.$t('message.validate.devices.antenna.buc_gain'), trigger: 'blur' }
        ],
        buc_power: [
          // 请输入buc饱和发送功率
          { required: true, message: this.$t('message.validate.devices.antenna.buc_power'), trigger: 'blur' }
        ]
      },

      addAntennaVisible: false,
      addAntennaForm: {
        satellite: '',
        satelliteOption: [],
        beam: '',
        beamOption: [],
        name: '',
        caliber: '',
        gt: '',
        gain: '',
        buc_gain: '',
        buc_power: ''
      },

      modifyAntennaVisible: false,
      modifyAntennaForm: {
        id: '',
        satellite: '',
        satelliteOption: [],
        beam: '',
        beamOption: [],
        name: '',
        caliber: '',
        gt: '',
        gain: '',
        buc_gain: '',
        buc_power: ''
      }
    }
  },
  mounted () {
    let self = this
    self.$nextTick(() => {
      self.getAntennaList()
    })
  },
  methods: {
    async getAntennaList () {
      let self = this
      self.antennaLoading = true
      await self.$store.dispatch('getAntennaList')
      self.antennaLoading = false
    },
    async handleAddSatelliteSelectChange (val) {
      let self = this
      self.addAntennaForm.beam = null
      await self.$store.dispatch('getBeamOption', val)
      self.addAntennaForm.beamOption = [...self.$store.state.beam.beamOption]
    },
    async handleModifySatelliteSelectChange (val) {
      let self = this
      self.modifyAntennaForm.beam = null
      await self.$store.dispatch('getBeamOption', val)
      self.modifyAntennaForm.beamOption = [...self.$store.state.beam.beamOption]
    },
    async handleAntennaCreate (index, row) {
      let self = this
      await self.$store.dispatch('getSatelliteList')
      self.addAntennaForm.satelliteOption = [...self.$store.state.satellite.satelliteList]
      self.addAntennaVisible = true
    },
    async handleAntennaModify (index, row) {
      let self = this
      await self.$store.dispatch('getSatelliteList')
      self.modifyAntennaForm.satelliteOption = [...self.$store.state.satellite.satelliteList]
      await self.$store.dispatch('getBeamOption', row.satellite)
      self.modifyAntennaForm.beamOption = [...self.$store.state.beam.beamOption]
      self.modifyAntennaForm.id = row.id
      self.modifyAntennaForm.satellite = row.satellite
      self.modifyAntennaForm.beam = row.beam
      self.modifyAntennaForm.name = row.name
      self.modifyAntennaForm.caliber = row.caliber
      self.modifyAntennaForm.gt = row.gt
      self.modifyAntennaForm.gain = row.gain
      self.modifyAntennaForm.buc_gain = row.buc_gain
      self.modifyAntennaForm.buc_power = row.buc_power
      self.modifyAntennaVisible = true
    },
    async handleAntennaDelete (index, row) {
      let self = this
      try {
        await self.$confirm(self.$t('message.center.antenna.deleteConfirm.title', { name: row.name }), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/antennas/${row.id}/`
      })
      self.$message({
        message: self.$t('message.common.info.deleteSuccess'),
        type: 'success'
      })
      self.getAntennaList()
    },
    handleAddAntennaDialogClosed () {
      let self = this
      self.$refs.addAntennaForm.resetFields()
    },
    submitForm (formName) {
      let self = this
      self.$refs[formName].validate(async valid => {
        if (valid) {
          if (formName === 'addAntennaForm') {
            self.submitButtonLoading = true
            try {
              await self.$store.dispatch('axios', {
                method: 'post',
                url: '/api/abs/devices/antennas/',
                data: {
                  satellite: self.addAntennaForm.satellite,
                  beam: self.addAntennaForm.beam,
                  name: self.addAntennaForm.name,
                  caliber: self.addAntennaForm.caliber,
                  gt: self.addAntennaForm.gt,
                  gain: self.addAntennaForm.gain,
                  buc_gain: self.addAntennaForm.buc_gain,
                  buc_power: self.addAntennaForm.buc_power
                }
              })
            } finally {
              self.submitButtonLoading = false
            }
            self.addAntennaVisible = false
            self.$message({
              message: self.$t('message.common.info.addSuccess'),
              type: 'success'
            })
            self.getAntennaList()
          }
          if (formName === 'modifyAntennaForm') {
            self.submitButtonLoading = true
            try {
              await self.$store.dispatch('axios', {
                method: 'patch',
                url: `/api/abs/devices/antennas/${self.modifyAntennaForm.id}/`,
                data: {
                  satellite: self.modifyAntennaForm.satellite,
                  beam: self.modifyAntennaForm.beam,
                  name: self.modifyAntennaForm.name,
                  caliber: self.modifyAntennaForm.caliber,
                  gt: self.modifyAntennaForm.gt,
                  gain: self.modifyAntennaForm.gain,
                  buc_gain: self.modifyAntennaForm.buc_gain,
                  buc_power: self.modifyAntennaForm.buc_power
                }
              })
            } finally {
              self.submitButtonLoading = false
            }
            self.modifyAntennaVisible = false
            self.$message({
              message: self.$t('message.common.info.modifySuccess'),
              type: 'success'
            })
            self.getAntennaList()
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  #antenna{
    height: 100%;
  }
</style>
